<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>layout 后台大布局 - Layui</title>
<link rel="stylesheet" href="layui/css/layui.css">
<link rel="stylesheet" href="css/ion.rangeSlider.css">
<link rel="stylesheet" href="zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
<link rel="stylesheet" href="css/colpick.css" type="text/css">
<link rel="stylesheet" href="css/ol.css">
<script src="layui/layui.js"></script>
<script src="jquery/jquery-3.4.1.js"></script>
<script src="zTree_v3/js/jquery.ztree.all.js"></script>
<script src="zTree_v3/js/treeutil.js"></script>
<script src="echarts/echarts4.js"></script>
<script src="echarts/echarts-gl.js"></script>
<script type="text/javascript" src="js/time.js"></script>
<script type="text/javascript" src="js/ol.js"></script>
<script type="text/javascript" src="js/ion.rangeSlider.js"></script>
<script type="text/javascript" src="js/colpick.js"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">layui 后台布局</div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <ul class="layui-nav layui-layout-left">
      <li class="layui-nav-item"><a href="">控制台</a></li>
      <li class="layui-nav-item"><a href="">商品管理</a></li>
      <li class="layui-nav-item"><a href="">用户</a></li>
      <li class="layui-nav-item">
        <a href="javascript:;">其它系统</a>
        <dl class="layui-nav-child">
          <dd><a href="">邮件管理</a></dd>
          <dd><a href="">消息管理</a></dd>
          <dd><a href="">授权管理</a></dd>
        </dl>
      </li>
       
    </ul>
    
    <ul class="layui-nav layui-layout-right">
    <li class="layui-nav-item">
    	<div id="time"></div>
    	<dl class="layui-nav-child">
          <dd><a href="">老骥伏枥志在千里</a></dd>
          <dd><a href="">烈士暮年壮心不已</a></dd>
        </dl>
    </li>
      <li class="layui-nav-item">
        <a href="javascript:;">
          <img src="../../images/IMG_0600.JPG" class="layui-nav-img">
          张旭辉
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">基本资料</a></dd>
          <dd><a href="">安全设置</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item"><a href="">退了</a></li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <ul class="layui-nav layui-nav-tree"  lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">系统多功能集成</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;" onclick="loadData('/home/lunbo')">Layui图片轮播/三级菜单联动</a></dd>
            <dd><a href="javascript:;" onclick="loadData('/home/ztreeLocation')">树形菜单城市管理</a></dd>
            <dd><a href="javascript:;" onclick="loadData('/home/computerInfo')">系统信息</a></dd>
            <dd><a href="javascript:;" onclick="loadData('/home/loadEcharts')">Echarts的简单使用</a></dd>
            <dd><a href="javascript:;" onclick="loadData('/home/loadEchartsGL')">Echarts-GL的简单使用</a></dd>
            <dd><a href="javascript:;" onclick="loadData('/home/kaptcha_code')">集成kaptcha加载验证码</a></dd>
            <dd><a href="javascript:;" onclick="loadData('/home/openlayers_page')">集成openlayers加载地图</a></dd>
            <dd><a href="javascript:;" onclick="loadData('/home/table')">集成layui表格实现分页</a></dd>
            <dd><a href="javascript:;" onclick="loadData('/home/time')">集成layui时间插件及js完成时间操作</a></dd>
            <dd><a href="javascript:;" onclick="loadData('/home/sendmsg')">腾讯云发送短信</a></dd>
            <dd><a href="javascript:;" onclick="loadData('/home/ionRangeSlider')">集成ion.rangeSlider</a></dd>
            <dd><a href="javascript:;" onclick="loadData('/home/colpick')">集成colpick颜色选择器</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">解决方案</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">列表一</a></dd>
            <dd><a href="javascript:;">列表二</a></dd>
            <dd><a href="">超链接</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item"><a href="">云市场</a></li>
        <li class="layui-nav-item"><a href="">发布商品</a></li>
      </ul>
    </div>
  </div>
  
  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div id="showDiv" style="padding: 15px;">
    	<div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-header">古词一首</div>
        <div class="layui-card-body">
        	<div style="text-align: center;">
        	<h1>龟虽寿</h1>
        	<h3 style="margin-left: 200px;margin-top: 20px;margin-bottom: 10px;">作者：曹操 年代：东汉</h3>
       		<p>神龟虽寿，犹有竟时。</p> 　　

			<p>螣蛇乘雾，终为土灰。</p> 　　
			
			<p>老骥伏枥，志在千里。</p> 　　
			
			<p>烈士暮年，壮心不已。</p> 　　
			
			<p>盈缩之期，不但在天；</p> 　　
			
			<p>养怡之福，可得永年。</p> 　　

			<p>幸甚至哉，歌以咏志。</p>
			
			<p>赏析：
         	这是一首富于哲理的诗，阐发了诗人的人生态度。诗中的哲理来自诗人对生活的真切体验，因而写得兴会淋漓，有着一种真挚而浓烈的感情力量；哲理与诗情又是通过形象化的手法表现出来的，因而述理、明志、抒情在具体的艺术形象中实现了完美的结合。诗中 “ 老骥伏枥 ” 四句是千古传诵的名句，笔力遒劲，韵律沉雄，内蕴着一股自强不息的豪迈气概，深刻地表达了曹操老当益壮、锐意进取的精神面貌。全诗的韵调跌宕起伏，开头四句娓娓说理， “ 犹有 “ 终为 ” 两个词组下得沉着。而 “ 老骥 ” 以下四句，语气转为激昂，笔挟风雷，使这位 “ 时露霸气 ” 的盖世英豪的形象跃然纸上。而最后数句则表现出一种深 沉委婉的风情，给人一种亲切温馨之感。全诗跌宕起伏,又机理缜密,闪耀出哲理的智慧之光,并发出奋进之情,振响着乐观声调.艺术风格朴实无华,格调高远,慷慨激昂,显示出诗人自强不息的进取精神,热爱生活的乐观精神。人寿命的长短不完全决定于天，只要保持身心健康就能延年益寿，这里可见诗人对天命持否定态度，而对事在人为抱有信心的乐观主义精神，抒发了诗人不甘衰老、不信天命、奋斗不息的壮志豪情。 “神龟虽寿，犹有竟时，螣蛇乘雾，终为土灰。”</p>
			</div>
        </div>
      </div>
    </div>
  </div>
    </div>
  </div>
  
  <div class="layui-footer">
    <!-- 底部固定区域 -->
    © layui.com - xuhui.zhang
  </div>
</div>

<script>
//JavaScript代码区域
var element;
var layer;
layui.use(['element','layer'], function(){
	 element = layui.element;
	 layer = layui.layer;
});
function loadData(url){
	$("#showDiv").load(url);
}
</script>
</body>
</html>